<div class="container container-height100">
    <div class="login">
        <form class="find-box p-50 center-block" [formGroup]="validateTelForm" (ngSubmit)="validateTel()">
            <div class="clearfix find-row">
                <div class="w-100 text-right pull-left"><small>手机号：</small></div>
                <div class="pull-left po-r form-group" [class.has-error]="(validateTelForm.hasError('phoneNumber','PhoneNumber') || !phoneNumberUsed) && validateTelForm.get('PhoneNumber').touched">
                    <input type="text" class="form-control" placeholder="请输入手机号" formControlName="PhoneNumber" (blur)="isPhoneNumberUsed()">
                    <em [hidden]="validateTelForm.hasError('required','PhoneNumber')" class="form-group-del" (click)="clear('PhoneNumber')"></em>
                </div>
                <div class="login-tips" *ngIf="validateTelForm.hasError('phoneNumber','PhoneNumber') && validateTelForm.get('PhoneNumber').touched">
                    <em class="login-tips-warn"></em> {{validateTelForm.getError('phoneNumber','PhoneNumber')?.desc}}
                </div>
                <div class="login-tips" *ngIf="!phoneNumberUsed && !validateTelForm.hasError('phoneNumber','PhoneNumber')">
                    <em class="login-tips-warn"></em> 手机号未被注册
                </div>
            </div>
            <div class="clearfix find-row">
                <div class="w-100 text-right pull-left"><small>短信验证码：</small></div>
                <div class="pull-left po-r form-group" [class.has-error]="validateTelForm.hasError('required','VerificationCode') && validateTelForm.get('VerificationCode').touched || error">
                    <div class="col-md-6">
                        <div class="row">
                            <input type="text" class="form-control verification " id="exampleInputPassword1" placeholder="输入短信验证码" formControlName="VerificationCode">
                            <em [hidden]="validateTelForm.hasError('required','VerificationCode')" class="form-group-del" (click)="clear('VerificationCode')"></em>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row" style="padding-left:15px;">
                          <button class="verification btn" type="button" [disabled]="validateTelForm.hasError('phoneNumber','PhoneNumber') || !phoneNumberUsed || countTime !== 0" (click)="requestVerificationCodeForResetPassword()">{{countTime !== 0 ? countTime : '获取验证码'}}</button>
                        </div>
                    </div>
                </div>
                <div class="login-tips" *ngIf="validateTelForm.hasError('required','VerificationCode') && validateTelForm.get('VerificationCode').touched">
                    <em class="login-tips-warn"></em> 请输入验证码
                </div>
                <div class="login-tips" *ngIf="error">
                  <em class="login-tips-warn"></em> {{error}}
                </div>
            </div>
            <div class="find-row clearfix">
                <div class="w-100 pull-left">&nbsp;</div>
                <div class="form-group pull-left">
                    <button *ngIf="!loading" type="submit" class="btn form-control" [disabled]="!validateTelForm.valid || !phoneNumberUsed || error">下一步</button>
                    <button *ngIf="loading" type="submit" class="btn form-control" disabled>下一步...</button>
                </div>
            </div>
        </form>
    </div>
</div>
